<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>1</li>
        <li id="li2">2</li>
        <li class="a b">3</li>
    </ul>


    <script>

        var oUl = document.querySelector('ul');

        // var oLi3 = document.querySelector('.a b');  
        console.log(oLi3)

        oUl.addEventListener('click', function (e) {
            // if (e.target.tagName === 'LI') {
            //     // console.log(this.innerHTML);  // this -> oUl
            //     console.log(e.target.innerHTML);
            // }

            if (e.target.id === 'li2') {
                console.log(e.target.innerHTML);
            }
            // else if (e.target.className === 'a b') {
            //     console.log(e.target.innerHTML);
            // }
            else if (e.target.classList.contains('a')) {
                console.log(e.target.innerHTML);
            }
        })

    </script>

</body>

</html>